<template>
    <el-container>
        <el-header v-show="activeIndex != 'IdentityRegisterUrl'">
            <div class="header-content">
                <div class="logo">Sign.Cash</div>
                <div class="menuName">{{ activeName }}</div>
                <div class="menu-icon">
                    <el-dropdown trigger="click" @command="handleCommand">
                        <img :src="menuUrl"/>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="transaction">发起交易</el-dropdown-item>
                            <el-dropdown-item command="autograph">解码广播</el-dropdown-item>
                            <el-dropdown-item command="message">验证消息</el-dropdown-item>
                            <el-dropdown-item command="address">地址转换</el-dropdown-item>
                            <el-dropdown-item command="generateAddress">生成地址</el-dropdown-item>
                            <el-dropdown-item command="textEncryption">文本加密</el-dropdown-item>
                            <el-dropdown-item command="hashCount">哈希计算</el-dropdown-item>
                            <!--<el-dropdown-item command="relationshipDeclaraction">关系声明</el-dropdown-item>-->
                            <el-dropdown-item command="identityRegister">用户登记</el-dropdown-item>
                            <el-dropdown-item command="downLoad">APP下载</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        <el-main v-show="!downLoad">
            <div class="advertisements" v-show="activeIndex != 'IdentityRegisterUrl'">
                <vue-seamless-scroll
                    :data="advertisement"
                    :class-option="optionSetting"
                    class="seamless-warp">
                    <span class="ad" v-for="item in advertisement">{{ item }}</span>
                </vue-seamless-scroll>
            </div>
            <div class="coin-type">
                <el-radio-group v-model="cointype" size="small" v-if="ishow">
                    <el-radio-button label="fch">FCH</el-radio-button>
                    <el-radio-button label="bch">BCH</el-radio-button>
                    <el-radio-button label="btc">BTC</el-radio-button>
                </el-radio-group>
            </div>
            <div class="content">
                <keep-alive>
                    <router-view :proParm="cointype" name="main"></router-view>
                </keep-alive>
            </div>
        </el-main>
        <el-footer v-show="!downLoad && activeIndex != 'IdentityRegisterUrl'">
            <div class="content">
                <div class="flag">
                    <div class="main-title">Sign.Cash</div>
                    <div class="sub-title">©copyright sign.cash 2019.all rights reserved</div>
                    <div class="sub-title">粤ICP备1588941215号-1</div>
                </div>
            </div>
        </el-footer>
        <DownLoad v-show="downLoad"></DownLoad>
    </el-container>
</template>

<script>
    import DownLoad from './DownLoad';

    export default {
        name: "phone",
        components: {DownLoad},
        data() {
            return {
                activeIndex: '',
                cointype: 'fch',
                languages: [
                    {label: '简体中文', value: '简体中文'}
                ],
                language: '简体中文',
                menuUrl: './static/images/menu.png',
                downLoad: false,
                advertisement: ['密签APP让手机秒变离线钱包!'],
                ishow: true
            }
        },
        computed: {
            activeName() {
                let activeName = '';
                switch (this.activeIndex) {
                    case 'identityRegister':
                        activeName = '身份登记';
                        break;
                    case 'transaction':
                        activeName = '发起交易';
                        break;
                    case 'autograph':
                        activeName = '解码广播';
                        break;
                    case 'message':
                        activeName = '验证消息';
                        break;
                    case 'address':
                        activeName = '地址转换';
                        break;
                    case 'generateAddress':
                        activeName = '生成地址';
                        break;
                    case 'textEncryption':
                        activeName = '文本加密';
                        break;
                    case 'hashCount':
                        activeName = '哈希计算';
                        break;
                    case 'downLoad':
                        activeName = 'APP下载';
                        break;
                    default:
                        break;
                }
                return activeName;
            },
            optionSetting() {
                return {
                    step: 0.5, // 数值越大速度滚动越快
                    limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 2, // 0向下 1向上 2向左 3向右
                    openWatch: false, // 开启数据实时监控刷新dom
                }
            }
        },
        mounted() {
            let path = this.$route.path.split('/')[1];
            if (path) {
                this.activeIndex = path;
            } else {
                this.activeIndex = 'transaction';
            }
            if (path === 'hashCount' || path === 'identityRegister' || path === 'relationshipDeclaraction' || path === 'IdentityRegisterUrl') {
                this.ishow = false;
            }
        },
        methods: {
            handleCommand(command) {
                this.activeIndex = command;
                if (command === 'downLoad') {
                    this.downLoad = true;
                } else {
                    this.downLoad = false;
                    this.$router.push('/' + command);
                }
                if (command === 'hashCount' || command === 'identityRegister' || command === 'relationshipDeclaraction' || command === 'IdentityRegisterUrl') {
                    this.ishow = false;
                } else {
                    this.ishow = true;
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .seamless-warp {
        height: 20px;
        overflow: hidden;
    }

    .el-container {
        width: 100%;
        min-height: 100%;
        background-color: #f3f5f8;

        /deep/ .el-radio-button {
            .el-radio-button__inner {
                width: 100%;
                text-align: center;
                border-left: 1px solid #DCDFE6;
                border-right: 1px solid #DCDFE6;
                border-top: none;
                border-bottom: none;
            }

            &:first-child .el-radio-button__inner {
                border-radius: 0;
                border-left: none;
                border-right: none;
            }

            &:last-child .el-radio-button__inner {
                border-radius: 0;
                border-left: none;
                border-right: none;
            }
        }

        /deep/ .el-header {
            padding: 0;
            background-color: #409EFF;

            .header-content {
                width: 100%;
                height: 100%;
                position: relative;

                .logo {
                    position: absolute;
                    left: 10px;
                    font-size: 18px;
                    font-family: 楷体;
                    color: #ffffff;
                    line-height: 60px;
                    text-align: center;
                }

                .menuName {
                    line-height: 60px;
                    text-align: center;
                    color: #ffffff;
                }

                .menu-icon {
                    position: absolute;
                    right: 10px;
                    top: 20px;

                    img {
                        width: 30px;
                        height: 21px;
                    }
                }
            }
        }

        /deep/ .el-main {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            overflow-x: hidden;

            .advertisements {
                position: relative;
                height: 20px;
                padding: 10px 10px;
                overflow-x: hidden;

                .ad {
                    line-height: 20px;
                    font-size: 14px;
                    color: #337bc4;
                }
            }

            .coin-type {
                padding: 0 10px;

                .el-radio-group {
                    width: 100%;
                    display: flex;

                    .el-radio-button {
                        flex: 1;
                    }
                }
            }

            .content {
                flex: 1 1 auto;
                margin: 0 10px 10px 10px;
                padding: 10px;
                border-top: 1px solid #DCDFE6;
                overflow-y: auto;
                background-color: #ffffff;

                .el-dialog__body {
                    & > div {
                        display: block !important;
                        overflow-x: auto !important;
                        white-space: nowrap;
                        width: 100%;
                    }

                    .qrContainer {
                        display: inline-block;
                        text-align: center;
                        width: 100%;

                        .qrSign {
                            width: auto;
                        }
                    }
                }
            }
        }

        /deep/ .el-footer {
            width: 100%;
            height: 90px !important;
            background-color: #2f3946;

            .content {
                width: 100%;
                height: auto;
                margin: 0 auto;
                padding-top: 10px;
                display: flex;
                color: #8c99ad;

                .flag {
                    width: 100%;

                    .main-title {
                        font-size: 18px;
                        font-family: 楷体;
                        color: #ffffff;
                        text-align: center;
                    }

                    .sub-title {
                        margin-top: 6px;
                        font-size: 12px;
                        text-align: center;
                    }
                }
            }
        }
    }
</style>
